<!-- 圆形背景加小图标居中 -->
<template>
    <div
        class="iconBorder"
        :style="{backgroundColor: bgColor, width: outWidth, height: outWidth, borderRadius: outWidth, lineHeight: outWidth}"
    >
        <img
            :src="getImg()"
            :style="{
                height: inWidth,
                width: inWidth,
                verticalAlign: isCenter ? 'middle' : 'auto',
                marginTop: marginTop ? marginTop : 'auto'
            }"
        />
    </div>
</template>

<script>
export default {
    props: ['imgSrc', 'outWidth', 'inWidth', 'bgColor', 'isCenter', 'marginTop'],
    name: 'iconBorder',
    data() {
        return {}
    },
    methods: {
        getImg() {
            const src = this.imgSrc
            const img = require(`@/assets/images/${src}`)
            return img
        }
    }
}
</script>
<style lang="scss" scoped>
.iconBorder {
    display: inline-block;
    text-align: center !important;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
    img {
        // vertical-align: middle;
        margin: 0 auto;
    }
}
</style>